import { StyleSheet } from 'react-native';

// 用法：
// import styles from '../../style';
// styles.container
export default StyleSheet.create({
  flex1: {
    flex: 1, // 撑满所有剩余的空间;前提是其父容器的尺寸不为零;
    // 如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的
    // 并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）
  },
  displayFlex: {
    display: 'flex',
  },
  flexRow: {
    flexDirection: 'row',
  },
  flexRowSpaceBetween: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  lineBorderTop: {
    borderTopColor: '#ECEDEE',
    borderTopWidth: StyleSheet.hairlineWidth,
  },
  lineBorderBottom: {
    borderBottomColor: '#ECEDEE',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  lineBorderLeft: {
    borderLeftColor: '#ECEDEE',
    borderLeftWidth: StyleSheet.hairlineWidth,
  },
  lineBorderRight: {
    borderRightColor: '#ECEDEE',
    borderRightWidth: StyleSheet.hairlineWidth,
  },
});
